<template>
	<view>
		<!--            tou-->
		<view class="active-list-title u-flex u-row-between u-col-center" v-if="!noMore">
			<view class="active-list-title-left u-flex u-row-between u-col-center">
				<view class="active-list-biao u-m-r-10"></view>
				<view class="active-list-name">{{ detail.name }}</view>
			</view>
			<view class="active-list-title-right u-flex u-row-center u-col-center"
				@click="goMore(detail.name,detail.id)">
				<view class="active-left-more">更多</view>
				<u-icon name="arrow-right" size="24" color="#999999"></u-icon>
			</view>
		</view>
		<view class="u-m-t-20" v-if="detail.list.length>0">
			<u-swiper :list="detail.list" :border-radius="20" mode="none"></u-swiper>
		</view>
		<view class="u-flex u-flex-wrap u-m-t-20">

			<view v-for="(item,index) in detail.goods" v-if="detail.tpye_lei=='2'" :key="index"
				:class="(index+1)%3==0?'':'u-m-r-14'">
				<shopro-activity-ban-card :detail="item" :type="item.is_pay" :image="item.first_image"
					:title="item.name" :subtitle="item.desc" @click=""></shopro-activity-ban-card>
			</view>
		</view>
		<view class="" class="u-flex u-flex-wrap u-m-t-20">
			<view v-for="(item,index) in detail.goods" :key="index" :class="(index+1)%3==0?'':'u-m-r-14'">
				<shopro-activity-goods-card :detail="item" :type="item.is_pay" :image="item.first_image"
					:title="item.name" :subtitle="item.desc" :price="item.price" @click="toDetail(item)">
				</shopro-activity-goods-card>
			</view>
		</view>
		<!--            购买弹框-->
		<shopro-tishi-popup :title="'购买文章确认'" :sub_title="'该文章为付费内容，是否购买该文章？'" :cancel_text="'我再想想'" :sure_text="'去购买'"
			ref="buypopupKecheng" @sure="goPayKecheng()"></shopro-tishi-popup>
		<!--            购买会员-->
		<shopro-tishi-popup :title="'您当前非会员'" :sub_title="'购买平台会员后方能享受会员价 请前往个人中心购买会员'" :cancel_text="'原价购买'"
			:sure_text="'升级会员'" ref="buypopupHuiyuan" @sure="goPayHuiyuan" @close="goPayKecheng()"></shopro-tishi-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsInfo: {}
			};
		},
		props: {
			detail: {
				type: Object,
				default: {

				}
			},
			title: {
				type: String,
				default: "名人名帖"
			},
			noMore: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			goMore(title, id) {
				this.$emit('goMore', {
					path: '/pages/activity/huodonglist/huodonglist',
					parmas: {
						title: title,
						course_category_id: id
					}
				})
			},
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},
			toDetail(item) {
				if (item.is_image != 2) {
					this.jump('/pages/goods/kechengDetail', {
						id: item.id
					})
				}
				if (item.is_image == 2) {
					if (item.is_pay == '3') {
						if (item.pay_status == false) {
							this.goodsInfo = item
							this.$refs.buypopupHuiyuan.$refs.deletpopup.open()
						} else {
							this.$refs.buypopupHuiyuan.$refs.deletpopup.close()
							this.jump('/pages/goods/kechengDetail', {
								id: item.id
							})
						}
					}
					if (item.is_pay == '2') {
						if (item.pay_status == false) {
							this.goodsInfo = item
							this.$refs.buypopupKecheng.$refs.deletpopup.open()
						} else {
							this.$refs.buypopupKecheng.$refs.deletpopup.close()
							this.jump('/pages/goods/kechengDetail', {
								id: item.id
							})
						}
					}
					if (item.is_pay == '1') {
						this.jump('/pages/goods/kechengDetail', {
							id: item.id
						})
					}

				}

			},

			goPayHuiyuan() {
				this.$refs.buypopupHuiyuan.$refs.deletpopup.close()
				this.jump('/pages/order/confirm_ke', {
					title: '购买会员',
					type: 'huiyuan',
					goods_id: this.goodsInfo.id,
					name: '平台会员',
					first_image: this.goodsInfo.first_image,
					price: this.goodsInfo.price,
					fromlujing: 'kecheng'
				})
			},
			goPayKecheng() {
				this.$refs.buypopupKecheng.$refs.deletpopup.close()
				let confirmGoodsList = []
				let obj = {
					goods_id: this.goodsInfo.id,
					title: this.goodsInfo.name,
					goods_image: this.goodsInfo.first_image,
					goods_subtitle: this.goodsInfo.desc,
					goods_num: 1,
					sku_price_id: 1,
					goods_price: this.goodsInfo.price
				}
				confirmGoodsList.push(obj)
				this.jump('/pages/order/confirm_ke', {
					goodsList: confirmGoodsList,
					type: 'is_nohuiyuan',
					fromlujing: 'kecheng',
					goods_id: this.goodsInfo.id,
					title: '购买确认'
				})
			},
		}
	}
</script>

<style lang="scss">
	.active-list-biao {
		width: 12rpx;
		height: 38rpx;
		background: #FFB02;
	}

	.active-left-more {
		font-size: 24rpx;
		color: #999999
	}

	.active-list-name {
		position: relative;
	}

	.active-list-name::after {
		position: absolute;
		left: -16rpx;
		top: 6rpx;
		content: '';
		background: #FFBF02;
		transform: translateX(-50%);
		width: 8rpx;
		height: 28rpx;
		background: linear-gradient(#F8A400, 0% #FFE456 100%);
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(248, 196, 0, 0.5);
		border-radius: 4rpx;
	}

	.active-left-more {
		color: #2C3041
	}

	.goods-box {
		background: none;

		.img-box {
			border-radius: 40rpx;
		}
	}
</style>
